<template>
  <div style="height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #00c4ff">
    <div style="display: flex; background-color: white; width: 60%;height: 600px">
      <div style="flex: 1">
        <img src="@/assets/logintp.jpg" alt="" style="width: 100%;height: 600px">
      </div>
      <div style="flex: 1; display: flex;align-items: center; justify-content: center">
        <el-form :model="user1" ref="user" :rules="rules" style="width: 80%">
          <img height="80" src="@/assets/tsglogo.png" alt="logo" class="sidebar-logo" style="width: 100%;margin-bottom: 40px"/>
          <div style="font-size: 25px; font-weight: bold; text-align: center; margin-bottom: 40px">桂林理工大学图书馆用户注册</div>
          <el-form-item prop="username1" >
            <el-input placeholder="请输入用户名" v-model="user1.username1"></el-input>
          </el-form-item>
          <el-form-item prop="password1">
            <el-input show-password placeholder="请输入密码" v-model="user1.password1"></el-input>
          </el-form-item>
          <el-form-item prop="password2">
            <el-input show-password placeholder="请确认密码" v-model="user1.password2"></el-input>
          </el-form-item>
          <el-form-item prop="email1">
            <el-input placeholder="请输入邮箱" v-model="user1.email1"></el-input>
          </el-form-item>
          <el-form-item prop="grade1">
            <el-input placeholder="请输入年级" v-model="user1.grade1"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%;height: 45px;font-size: 18px" @click="handleEnroll">注册</el-button>
          </el-form-item>
          <div><span style="color: darkcyan;cursor: pointer"><router-link to="/login">返回登录</router-link></span></div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Enroll',
  data() {
    return {
      user1: {
        id1: '',
        username1: '',
        password1: '',
        password2: '',
        email1: '',
        grade1: '', // 新增年级字段
      },
      rules: { // 新增部分
        username1: [{required: true, message: '请输入用户名', trigger: 'blur'}],
        password1: [{required: true, message: '请输入密码', trigger: 'blur'}],
        password2: [
          {required: true, message: '请确认密码', trigger: 'blur'},
          {validator: this.validatePassword, trigger: 'blur'}
        ],
        email1: [{required: true, message: '请输入邮箱', trigger: 'blur'}],
        grade1: [{required: true, message: '请输入年级', trigger: 'blur'}], // 新增年级验证规则
      },
      user: {
        username: '',
        password: '',
        email: '',
        grade: '', // 对应后端年级字段
      },
    }
  },
  methods: {
    validatePassword(rule, value, callback) {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.user1.password1) {
        callback(new Error('两次输入密码不一致'));
      } else {
        callback();
      }
    },
    async handleEnroll() {
      try {
        if (!this.user1.username1) {
          this.$message.error('请输入账号');
          return;
        }
        if (!this.user1.email1) {
          this.$message.error('请输入邮箱');
          return;
        }
        if (!this.user1.password1) {
          this.$message.error('请输入密码');
          return;
        }
        if (!this.user1.password2) {
          this.$message.error('请确认密码');
          return;
        }
        if (this.user1.password1 !== this.user1.password2) {
          this.$message.error('两次密码输入不一致，请重新输入');
          return;
        }
        if (!this.user1.grade1) {
          this.$message.error('请输入年级');
          return;
        }

        await this.$refs.user.validate(); // 先进行表单验证

        this.user.username = this.user1.username1;
        this.user.password = this.user1.password1;
        this.user.email = this.user1.email1;
        this.user.grade = this.user1.grade1; // 添加年级到发送的数据

        const response = await axios.post('http://localhost:8080/users/enroll', this.user);
        const {message} = response.data;
        console.log(message);
        this.$message.success('恭喜你成为了我们图书馆借阅系统的一员');
      } catch (error) {
        console.error('Error enrolling:', error);
        this.$message.error('注册失败，请重试');
      }
    }
  }
}
</script>

<style scoped>
/* 如果需要特定样式可以在这里添加 */
</style>